import {QRCode} from "react-qrcode";
import NavBar from "../components/commons/navbar/NavBar.tsx";
import "../styles/modules/order_details.css"
import {baseUrl} from "../settings/Settings.ts";
import {useEffect} from "react";


const OrderDetailsPage = () => {

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(`${baseUrl}/api/order/info`, {
                    method: 'GET',
                    headers: {
                        'Access-Control-Allow-Origin': '*',
                        'Access-Control-Allow-Headers': 'Content-Type, Accept, Origin, X-Requested-With',
                        'Content-Type': 'application/json'
                    }
                });
                const data = await response.json();
                console.log(data)
                setCategoryList(data.categories)
            } catch (error) {
                console.error('Error fetching data')
            }
        }

        fetchData();
    }, []);




    return (

        <>
            <NavBar/>
            <main className={"overflow-y-scroll"}>

                <div className="p-3" id="container-home">


                    <div className="row justify-content-between align-items-center" id={"order-header"}>

                        <h1 className="headline-large text-center" id="h1-header">Your order has been placed!</h1>
                        <p className="headline-small text-center" id="p3-text">
                            Please bring your ass to the library to pick your books up
                        </p>
                        <div className="col-auto w-100 text-center">
                        <span className="badge p-4 ps-4 pe-4 me-3 rounded-pill"
                              id="badge-counter">in process</span>
                        </div>


                    </div>

                    <div className="mt-5">

                        <h1 className="ms-3 headline-medium">Details</h1>
                    </div>

                    <div id={"container-details"}>


                        <div className={"order-detail-container"}>
                            <div className={"text-start"} id={"div-badges"}>

                                <span className={"badge p-2 ps-3 pe-3 m-0 rounded-pill"}>№320952</span>
                                <span className={"badge p-2 ms-2 ps-3 pe-3 m-0 rounded-pill"}>2001.02.05</span>
                                <span className={"badge p-2 ms-0 ps-3 pe-3 mt-2 rounded-pill"}>@bluecloudone</span>
                                <span className={"badge p-2 ms-2 ps-3 pe-3 mt-2 rounded-pill"}>6 books</span>
                                <span className={"badge p-2 ms-0 ps-3 pe-3 mt-2 rounded-pill"}>Till 2001.02.06</span>
                            </div>
                            <QRCode value="https://example.com" size={100} id={"qr-code"}/>

                        </div>

                        <div className={"order-detail-container"}>
                            <div className="card">
                                <div style={{display: 'none'}} className="item-id">{String(stack.stackId)}</div>
                                <img className="bd-placeholder-img card-img-top image-holder crop-image"
                                     id={"image-library-card"} src={baseUrl + stack.imgUrl} alt=""
                                     width="100%"/>
                                <div className="card-body">
                                    <p className="card-text mb-0">{stack.title}</p>
                                    <p className="text-secondary p-0 mt-1">{stack.description}</p>
                                    <div className="d-flex justify-content-between align-items-center">
                                        <div className="btn-group">
                                            <button type="button"
                                                    className="btn btn-sm btn-outline-secondary rounded-start-4 btn-view">View
                                            </button>
                                            <button type="button"
                                                    data-bs-toggle="modal" data-bs-target="#exampleModal"
                                                    className="btn btn-sm btn-outline-secondary rounded-end-4 btn-purchase"
                                                    value={String(stack.itemId)}

                                                    onClick={handleClick}
                                            >Borrow
                                            </button>
                                        </div>
                                        <span className="badge rounded-pill p-2">
              <span>{stack.quantity}</span>
            </span>
                                    </div>
                                </div>
                            </div>


                        </div>


                    </div>

                </div>


            </main>
        </>
    )
}

export default OrderDetailsPage